<script>
import CustomFixDialog from '@/portal4.1/pc/component/common/Dialog/common/CustomFixDialog.vue'
import { dialog } from '@/mixins/dialog'
import { layout } from '@/mixins/layout'
import { Client } from '@stomp/stompjs'
import SockJS from 'sockjs-client'
import { getToken } from '@/utils/auth'
export default {
  name: 'NoticeDialog',
  components: { CustomFixDialog },
  mixins: [dialog, layout],
  data() {
    return {
      active: 0,
      template: null // 当前使用模版
    }
  },
  computed: {
    leftBack() {
      return { background: 'url(' + this.leftBg + ') no-repeat 100% 100%' }
    }
    // activeColor() {
    //   return { '--active-color': this.layoutTheme.dialogActiveColor, '--active-back': this.layoutTheme.dialogActiveBack }
    // }
  },
  created() {
    this.initWebsocket()
    this.change(0)
  },
  beforeDestroy() {
    this.closeWebsocket()
  },
  methods: {
    change(data) {
      this.active = data
      if (this.active === 0) {
        const path = './notice/DbDialogContent.vue'
        this.template = () => import(`${path}`)
      }
      if (this.active === 1) {
        const path = './notice/YbDialogContent.vue'
        this.template = () => import(`${path}`)
      }
      if (this.active === 2) {
        const path = './notice/InformDialogContent.vue'
        this.template = () => import(`${path}`)
      }
      if (this.active === 3) {
        const path = './notice/LinkDialogContent.vue'
        this.template = () => import(`${path}`)
      }
    },
    initWebsocket() {
      this.stompClient = new Client({
        brokerURL: '', // 可以不赋值，因为后面用SockJS来代替
        connectHeaders: { token: getToken() },
        debug: function(str) {
          console.log(str)
        },
        reconnectDelay: 10000, // 重连时间
        heartbeatIncoming: 4000,
        heartbeatOutgoing: 4000
      })
      // 用SockJS代替brokenURL
      this.stompClient.webSocketFactory = function() {
        return new SockJS('/socket')
      }
      // 连接
      this.stompClient.onConnect = frame => {
        // 订阅消息
        this.stompClient.subscribe('/topic/info', res => {
          const body = JSON.parse(res.body)
          this.$notify.info({
            title: body.title,
            dangerouslyUseHTMLString: false,
            position: 'bottom-right',
            message: body.data
          })
        })
        // 订阅消息
        this.stompClient.subscribe('/user/send/info', res => {
          const { body } = res
          const data = JSON.parse(body)
          this.$notify.warning({
            title: data.title,
            dangerouslyUseHTMLString: false,
            position: 'bottom-right',
            message: data.data
          })
        })
        // 新版不用send而是publish
        /* this.stompClient.publish({
          destination: '/send/hello',
          body: '123'
        }) */
      }
      // 错误
      this.stompClient.onStompError = function(frame) {
        console.log('Broker reported error: ' + frame.headers['message'])
        console.log('Additional details: ' + frame.body)
        // 这里不需要重连了，新版自带重连
      }
      // 启动
      this.stompClient.activate()
    },
    closeWebsocket() {
      if (this.stompClient !== undefined && this.stompClient !== null) {
        this.stompClient.disconnect(() => {
          console.log('关闭链接')
        })
      }
    }
  }
}
</script>

<template>
  <custom-fix-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :width="width"
    :modal="modal"
    :top="top"
    append-to-body
  >
    <div class="notice-dialog" :style="borderStyle">
      <div class="notice-left" :style="leftBack">
        <div class="notice-left-header">
          <i class="el-icon-message-solid active-color" :style="activeColor" />
          <span class="header-title">我的消息中心</span>
        </div>
        <div :class="active === 0 ? 'active':''" class="notice-ul-li" :style="activeColor" @click="change(0)">
          <i class="el-icon-document-copy" />
          <span class="li-title">待办消息</span>
        </div>
        <div :class="active === 1 ? 'active':''" class="notice-ul-li" :style="activeColor" @click="change(1)">
          <i class="el-icon-bell" />
          <span class="li-title">已办消息</span>
        </div>
        <div :class="active === 2 ? 'active':''" class="notice-ul-li" :style="activeColor" @click="change(2)">
          <i class="el-icon-monitor" />
          <span class="li-title">站内通知</span>
        </div>
        <!--        <div :class="active === 3 ? 'active':''" class="notice-ul-li" :style="activeColor" @click="change(3)">
          <i class="el-icon-warning-outline" />
          <span class="li-title">链接消息</span>
        </div>-->
      </div>
      <div class="notice-body" :style="borderStyle">
        <component :is="template" v-if="template" />
      </div>
    </div>
  </custom-fix-dialog>
</template>

<style lang="scss" scoped>
.notice-dialog {
  width: 100%;
  height: 100%;
  display: flex;
  .notice-left {
    background-size: 100% 100%;
    width: 200px;
    height: 100%;
    .notice-left-header {
      width: 100%;
      height: 50px;
      font-size: 1.1rem;
      line-height: 50px;
      text-align: center;
      font-weight: 600;
      .header-title {
        margin-left: 10px;
      }
      .active-color {
        color: var(--active-color);
      }
    }
    .notice-ul-li {
      cursor: pointer;
      width: 100%;
      height: 70px;
      line-height: 70px;
      text-align: center;
      font-size: 1.1rem;
      .li-title {
        margin-left: 5px;
      }
    }
    .notice-ul-li.active {
      background-color: var(--active-back);
      border-left: 3px solid var(--active-color);
    }
  }
  .notice-body {
    flex: 1 1;
    height: 100%;
  }
}
</style>
